<template>
  <ContentBox :has-corner="true" class="community-person-radio">
    <ContentBoxTitle title="小区人员比例" />
    <div class="community-person-radio__content">
      <!-- <Pie style="padding-top: 0" desc="男女占比" circle1-radius="128" circle2-radius="144" circle3-radius="160" :list="data.gender" :canvas-width="220" :canvas-height="220" pie-radius="50px"/> -->
      <Pie
        style="padding-top: 0"
        desc="职业构成"
        :formatter="formatter"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="data.job"
        :canvas-width="300"
        :canvas-height="220"
        pie-radius="50px"
      />
      <Pie
        style="padding-top: 0"
        desc="收入情况"
        :formatter="formatter"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="data.income"
        :canvas-width="300"
        :canvas-height="220"
        pie-radius="50px"
      />
      <Pie
        style="padding-top: 0"
        desc="年龄分布"
        :formatter="formatter"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="data.age"
        :canvas-width="300"
        :canvas-height="220"
        pie-radius="50px"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Pie from '@/components/Pie/Index'
export default {
  name: 'CommunityHouseUse',
  components: {
    ContentBox,
    ContentBoxTitle,
    Pie
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formatter: function (a) { return a.name + ' ' + a.percent + '%' }
    }
  }
}
</script>

<style lang="scss">
.community-person-radio {
  width: $base * 910px;
  height: $base * 230px;
  position: relative;
  .content-box-title__content {
    width: $base * 300px;
  }
  .community-person-radio__content {
    display: flex;
    // padding-top: 10px;
    // margin-top: -55px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
</style>